<template>
	<view class="cateLayout">
		<!-- 自定义的搜索组件 -->
		<my-search @click="gotoSearch"></my-search>
		<view class="content">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="title" scroll-y :style="{height:wh+'px'}">
				<view @click="activeChanged(index)" v-for="(item,index) in cateList" :key="item.cat_id" :class="['title-item',currentIndex===index?'active':'']">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<!--右侧的滚动视图区域 -->
			<scroll-view class="list" scroll-y :style="{height:wh+'px'}" :scroll-top="scrollTop">
				<view class="list-item" v-for="(item2,index2) in cateLevel2" :key="index2">
					<view class="list-item-title">
						/ {{item2.cat_name}} /
					</view>
					<view class="list-item-content">
						<view @click="gotoGoodsList(item3)" class="item" v-for="(item3,index3) in item2.children" :key="index3">
							<image :src="item3.cat_icon" mode="aspectFill"></image>
							<view class="text">
								{{item3.cat_name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'	
import { ref } from 'vue';
import { cartMixin } from '@/mixins/tabbar-badge.js';
cartMixin.setup();
const wh = ref(null)
const currentIndex = ref(0)
const scrollTop = ref(0)
const cateList = ref([])
const cateLevel2 = ref([])
const defaultImg = ref('https://img2.baidu.com/it/u=977849580,3797914932&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500')
onLoad(()=>{
	getSystemInfo()
	getCateList()
})
const getCateList = async() =>{
	const { data: res } = await 
	uni.$http.get('/api/public/v1/categories')
	    // 判断是否获取失败
	    if (res.meta.status !== 200) return uni.$showMsg()
	    // 转存数据
	    cateList.value = res.message
		cateLevel2.value = res.message[0].children
		console.log(cateLevel2.value)
}
const getSystemInfo = () =>{
	const systemInfo = uni.getSystemInfoSync()
	wh.value = systemInfo.windowHeight-50
}
const activeChanged =(index)=>{
	currentIndex.value =index
	cateLevel2.value = cateList.value[index].children
	scrollTop.value = scrollTop.value===0?1:0
	// console.log(cateLevel2.value)
}
const gotoGoodsList = (item) =>{
	uni.navigateTo({
		url:'/subpkg/goods_list/goods_list?cid='+item.cat_id
	})
}
const gotoSearch = () =>{
	uni.navigateTo({
		url:'/subpkg/search/search'
	})
}
</script>

<style lang="scss" scoped>
.cateLayout{
	.content{
		display: flex;
		.title{
			width: 120px;
			.title-item{
				line-height: 60px;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 12px;
				&.active{
					background-color: #fff;
					position: relative;
					&::before{
						content: '';
						display: block;
						width: 3px;
						height: 30px;
						background-color: #c00000;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
		.list{
			.list-item{
				&-title{
					font-size: 12px;
					font-weight: bold;
					text-align: center;
					padding: 15px 0;
				}
				&-content{
					display: flex;
					flex-wrap: wrap;
					.item{
						width: 33.3%;
						margin-bottom: 10px;
						display: flex;
						flex-direction: column;
						align-items: center;
						image{
							width: 60px;
							height: 60px;
						}
						.text{
							font-size: 12px;
						}
					}
				}
			}
		}
	}
}
</style>
